<script setup>
import { computed } from "vue";

const props = defineProps(["type", "title"]);
const text = computed(() => {
  return props.title.toUpperCase();
});
</script>

<template>
  <span class="badge" :class="props.type">
    {{ text }}
  </span>
</template>

<style scoped>
.badge {
  background-color: #ccc;
  color: #252525;
  border-radius: 30px;
  padding: 0.5rem 1.5rem;
  display: inline-block;
  margin-left: 0.5rem;
}
.frontend {
  background-color: #3d008d;
  color: white;
}
.backend {
  background-color: #71008d;
  color: white;
}
.career {
  background-color: #8d006e;
  color: white;
}
</style>
